<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click.native.prevent="handleCreate">
        添加
      </el-button>
      <el-button style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table border stripe highlight-current-row style="width: 100%;" :data="listData" :empty-text="emptyText" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" width="40px" prop="trendsId"></el-table-column>
      <el-table-column label="动态内容" prop="trendsContent"></el-table-column>
      <el-table-column label="动态图片">
        <template slot-scope="scope">
          <a v-for="(item,index) in scope.row.trendsPictures" :key="index" target="_blank" :href="item">
            <el-image style="width: 180px;height: 90px;" :src="item" fit="contain"></el-image>
          </a>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="评论">
        <template slot-scope="scope">
          <div style="margin-top: 10px;" v-for="(item,index) in scope.row.trendsCommentList" :key="index">
            <el-button @click.native.prevent="deleteCommnent(item.commentId)" type="danger" icon="el-icon-delete" circle></el-button>
            {{item.commentContent}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background :pager-count="pagerCount" :page-size="reqData.perPage" :current-page="reqData.curPage"
        layout="prev, pager, next" @current-change="pageChange" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getList, del
  } from "@/api/trends"
  import { del as commentDel } from "@/api/comment"
  import {
    errorMsg,
    successMsg
  } from "@/utils/my"

  export default {
    inject: ["reload"],
    data() {
      return {
        reqData: {
          curPage: 1,
          perPage: 10
        },
        pagerCount: 13,
        total: 0,
        listData: [],
        loading: true,
        emptyText: "暂无任何数据"
      };
    },

    created() {
      this.fetchData()
    },

    methods: {

      pageChange(p) {
        this.reqData.curPage = p
        this.fetchData()
      },

      fetchData() {
        let that = this
        that.loading = true
        getList(that.reqData).then(res => {
          that.loading = false
          that.total = res.data.total
          that.listData = res.data.list
        })
      },

      handleSelectionChange(rows) {
        this.delRows = rows
        let idArr = []
        for (let i = 0; i < rows.length; i++) {
          idArr.push(rows[i].trendsId)
        }
        this.delIds = idArr.join(',')
      },

      handleDelete() {
        const that = this
        if (that.delIds.length <= 0) {
          return errorMsg('请至少选择一项')
        }
        that.loading = true
        del({
          ids: that.delIds
        }).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          that.reload()
        })
      },

      deleteCommnent(id) {
        const that = this
        that.loading = true
        commentDel({
          ids: id.toString()
        }).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          that.reload()
        })
      }

    }
  };
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
